<template>
  <div ref="BarECharts" style="width: 100%;height: 300px"></div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['tableData'])

const initEcharts = ((item) => {

  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      color:['#5b9bd5','#ed7d31'],
      backgroundColor: '#FFF',
      grid:{
        top:20,
        bottom:80,
        left:'10%',
        right:'10%'
      },
      legend: {
        bottom:'10',
        itemWidth:30,
        itemHeight:6,
        data:['用人','用人同比']
      },
      xAxis: [
        {
          name:'月份',
          nameLocation:'center',
          nameGap: 30,
          axisLine:{
            show:false
          },
          axisTick:{
            show:false
          },
          data: props.tableData.map(item=>item.templateMonth)
        }
      ],
      yAxis: [
        {
          nameLocation:'center',
          nameGap: 40,
          nameTextStyle:{
            color:'#000'
          },
          axisLine:{
            lineStyle:{
              color:'#CCC'
            },
          },
          axisTick:{
            show:false
          },
          splitLine: {
            show:false,
            lineStyle:{
              color:'#CCC'
            }
          },
          axisLabel:{
            color:'#000'
          }
        },
        {
          nameLocation:'center',
          nameGap: 40,
          nameTextStyle:{
            color:'#000'
          },
          axisLine:{
            lineStyle:{
              color:'#CCC'
            },
          },
          axisTick:{
            show:false
          },
          splitLine: {
            show:false
          },
          axisLabel:{
            color:'#000'
          }
        }
      ],
      series: [
        {
          name:'用人',
          type:'bar',
          barWidth: '40%',
          data:props.tableData.map(item=>item.amount)
        },
        {
          name:'用人同比',
          type:'line',
          yAxisIndex:1,
          itemStyle:{
            opacity:0
          },
          lineStyle:{
            width:4
          },
          data:props.tableData.map(item=>{
            return 0
          })
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})

watch(() => props.tableData, (newValue, oldValue) => {
  initEcharts(newValue)
}, {immediate: true, deep: true})

onMounted(() => {
  initEcharts(props.tableData)
})

</script>

<style lang="less" scoped>
</style>
